<template>
	<div>
		<!-- 标题 -->
	<my-title></my-title>

		<div class="declare">免责声明：平台发布的所有信息（收费、免费）；平台只负责发布、展示，与平台本身无关，平台不负任何责任。</div>

		<van-divider>请选择您要发布的栏目</van-divider>
		<div class="menu" @click="showPopup">
			<function-menu></function-menu>
		</div>

		<van-popup v-model="show" position="bottom" :style="{ height: 'auto' }">
			<div>
				<p class="select option">请选择发布栏目</p>
				<p class="option">招聘</p>
				<p style="height: 1px; width: 100%; background-color: #f1f1f1"></p>
				<p class="option">求职</p>
				<p style="height: 5px; width: 100%; background-color: #f1f1f1"></p>
				<p class="option">取消</p>
			</div>
		</van-popup>
	</div>
</template>
<script>
import FunctionMenu from "../components/FunctionMenu.vue"
import MyTitle from "../components/MyTitle.vue"
export default {
	components: { FunctionMenu, MyTitle },
	data () {
		return {
			show: false,
		};
	},

	methods: {
		showPopup () {
			this.show = true;
		},
	},
}
</script>
<style scoped>
/* 标题 */
.title {
	background-color: #ed414a;
	height: 44px;
	color: white;
	font-size: 18px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px 0 5px;
	width: calc(100% - 20px);
}
.title .back {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.declare {
	color: #888;
	font-size: 14px;
	margin: 20px;
	line-height: 20px;
	background-color: #eff3f7;
	padding: 10px;
	border-radius: 2px;
}
::v-deep .van-divider {
	font-size: 16px;
	margin: 16px 32px;
}
.menu {
	box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.1);
}
.option {
	font-size: 16px;
	text-align: center;
	height: 40px;
	line-height: 40px;
	color: #888;
}
.select {
	color: #fff;

	background-color: #ed414a;
}
</style>
